import { message } from 'antd';
import { useCallback, useEffect } from 'react';
import './App.css';
import { LibList } from './LibList';
import { LibListPager } from './LibListPager';
import { LibSearchBox } from './LibSearchBox';
import { useLibStore } from './useLibStore';

function App() {
  const { pending, load } = useLibStore();
  const [messageApi, contextHolder] = message.useMessage();

  const error = useCallback(
    (err: any) => {
      console.error(err);
      messageApi.open({
        type: 'error',
        content: err.message,
      });
    },
    [messageApi],
  );

  useEffect(() => {
    load().catch((err) => error(err));
  }, [load, error]);

  return (
    <>
      {contextHolder}
      <div className='container'>
        <LibSearchBox />
        {pending ? null : (
          <>
            <LibListPager />
            <LibList />
            <LibListPager />
          </>
        )}
      </div>
    </>
  );
}

export default App;
